<template>
    <view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
        <view
            :class="`wd-tabbar wd-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${bordered ? 'is-border' : ''}`"
            :style="rootStyle"
        >
            <slot></slot>
        </view>
    </view>
</template>
<script lang="ts">
    export default {
        name: 'wd-tabbar',
        options: {
            addGlobalClass: true,
            virtualHost: true,
            styleIsolation: 'shared'
        }
    };
</script>
<script lang="ts" setup>
    import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue';
    import type { TabbarItem } from '../wd-tabbar-item/types';
    import { addUnit, getRect, isDef, objToStyle } from '../common/util';
    import { useChildren } from '../composables/useChildren';
    import { TABBAR_KEY, tabbarProps } from './types';

    const props = defineProps(tabbarProps);
    const emit = defineEmits(['change', 'update:modelValue']);

    const height = ref<number | string>(''); // 占位高度
    const { proxy } = getCurrentInstance() as any;

    const { linkChildren } = useChildren(TABBAR_KEY);

    linkChildren({
        props,
        setChange
    });

    const rootStyle = computed(() => {
        const style: CSSProperties = {};
        if (isDef(props.zIndex)) {
            style['z-index'] = props.zIndex;
        }
        return `${objToStyle(style)};${props.customStyle}`;
    });

    watch(
        [() => props.fixed, () => props.placeholder],
        () => {
            setPlaceholderHeight();
        },
        { deep: true, immediate: false }
    );

    onMounted(() => {
        if (props.fixed && props.placeholder) {
            nextTick(() => {
                setPlaceholderHeight();
            });
        }
    });

    /**
     * 子项状态变更
     * @param child 子项
     */
    function setChange(child: TabbarItem) {
        let active = child.name;
        emit('update:modelValue', active);
        emit('change', {
            value: active
        });
    }

    function setPlaceholderHeight() {
        if (!props.fixed || !props.placeholder) {
            return;
        }

        getRect('.wd-tabbar', false, proxy).then((res) => {
            height.value = Number(res.height);
        });
    }
</script>
<style lang="scss" scoped>
    @import './index.scss';
</style>
